<template>
  <div class="app-container">
    <!-- 标题条件查询 -->
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>条件查询</span>
      </div>
      <div>
        <el-row>
          <el-form :inline="true" :model="searchData" class="demo-form-inline">
            <el-col :span="8">
              <el-form-item  label="作者">
                <el-input  placeholder="作者" v-model="searchData.author" ></el-input>
              </el-form-item>
            </el-col>
             <el-col :span="8">
                <el-form-item  label="标题">
                  <el-input  placeholder="标题" v-model="searchData.title"></el-input>
                </el-form-item>
            </el-col>
            <el-col :span="8">
                <el-form-item label="编辑类型">
                  <el-select  placeholder="编辑类型" v-model="searchData.editorType">
                    <el-option label="富文本" :value="parseInt('0')"></el-option>
                    <el-option label="markdown" :value="parseInt('1')"></el-option>
                  </el-select>
                </el-form-item>
            </el-col>
            <el-col :span="20" justify="end">
                  <el-form-item class="btn">
                        <el-button size="mini" @click="reset">重置</el-button>
                        <el-button size="mini" type="primary" @click="search">搜索</el-button>          
                  </el-form-item>
            </el-col>
        </el-form>
        </el-row>
      </div>
    </el-card>
    <!-- 文章列表 -->
     <el-card class="box-card">
      <div slot="header" class="clearfix">
          <el-button size="mini" type="primary" @click="increased">新增</el-button>
      </div>
      <div>
          <el-table v-loading="loading" :data="rowsData" border style="width: 100%">
            <el-table-column fixed   type="index" width="50" label="#"></el-table-column>
            <el-table-column prop="title" width="150" label="文章标题" ></el-table-column>
            <el-table-column  width="150" label="展示图片">
              <template slot-scope="scope">
                <img class="coveimg" :src="scope.row.coverImg" alt="">
              </template>
            </el-table-column>
            <el-table-column  prop="createTime" width="150"  label="添加时间"></el-table-column>
            <el-table-column  prop="author" width="150"  label="文章作者"></el-table-column>
            <el-table-column   width="150" label="文章是否显示">
               <template slot-scope="scope">
                 <el-switch @change="Show(scope.row)" v-model="scope.row.isShow" :active-value="1" :inactive-value="0"></el-switch>
              </template>
            </el-table-column>
            <el-table-column  width="150" label="内容">
                <template slot-scope="scope">
                 <el-tag v-if="scope.row.editorType=='0'">富文本</el-tag>
                 <el-tag v-else> markdown </el-tag>
              </template>
            </el-table-column> 
            <el-table-column  fixed="right"  label="操作"  width="150">
              <template slot-scope="scope">
                <el-button @click="handleClick(scope.row)" icon="el-icon-view" type="text" size="small">编辑文章</el-button>
                <el-button type="text" style="color:red" @click="removeArtice(scope.row)" size="small">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
          <!-- 这是分页 -->
          <div>
             <el-pagination 
              :current-page="page.start"
              :page-sizes="page.pageSizes"
              :page-size="page.limit" 
              layout="total, sizes, prev, pager, next, jumper"
              :total="page.total"
              @size-change="handleSizeChange"  
              @current-change="handleCurrentChange">
              </el-pagination>
          </div>
      </div>
    </el-card>
  </div>
</template>

<script>
import product from "@/api/content/product";
export default {
  data() {
    return {
      //页码
      page:{
          //开始页
        start: 1,
        //最多几行
        limit: 5,
        //总页数
        total: 0,
        pageSizes:[5, 10, 20, 30],
      },
      loading:false,
      //只是为了不报错
      // formInline:[],
      rowsData:[],
      //查询对象
      searchData:{},
    };
  },
  watch: {},
  methods: {
    //获取文章列表
    init(){
        this.loading=true;
      product.findArticles(this.page.start,this.page.limit,this.searchData).then(res=>{
        // console.log(res)  
        if(res.success){
          this.rowsData=res.data.rows;
          this.page.total=res.data.total;
          // console.log(this.page.total)
        }else{
            this.loading=false;
          this.$message.error("获取文章列表失败")
        }
        this.loading=false;
      })
          
    },
    //更新文章状态
    Show(e){
      // console.log(e.id)
      var tempShow=e.isShow==0?1:0;
     product.changeShowStatus({
       isShow:e.isShow,
       id:e.id
     }).then(res=>{
       if(res.success){
          this.$message.success("文章状态改变成功");
       }else{
          this.$message.error("文章状态改变失败");
          e.isShow=tempShow;
       }
     })
    },
    //重置
    reset(){
      this.searchData.author="";
      this.searchData.title="";
      this.searchData.editorType="";
      this.init();
    },
    //搜索文章
    search(){ 
      // console.log(this.searchData);
      this.page.start=1;
      this.init();
    },
    //删除当前文章
    removeArtice(e){
      console.log(e);
      this.$confirm('此操作将永久删除该文章, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          product.del(e.id).then(res=>{
              console.log(res);
              if(res.success){
                  this.$message({
                    type: 'success',
                    message: '删除成功!'
                  });
                  this.init();
              }else{
                this.$message({
                    type: 'info',
                    message: '删除失败'
                   }); 
                  this.init();
              }
          })
          
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });          
        });
     
    },
    //编辑文章
    handleClick(row) {
        console.log(row);
        this.$router.push({name:"AddArticle",params:{id:row.id}})
    },
    //新增文章
    increased(){
      this.$router.push({name:"AddArticle"})
    },
    //每页条数pageSize 改变时会触发
    handleSizeChange(val){
      this.page.limit=val;
      this.init()
    },
    //当前页currentPage 改变时会触发
    handleCurrentChange(val){
      this.page.start=val;
      this.init()
    },
  },
  created(){
    this.init();
  }
};
</script>
<style lang="scss" scoped>
@import "@/styles/myScss";
.btn{
      display: flex;
      justify-content:flex-end;
}
.coveimg{
  width: 100px;
  height: auto;
}
</style>

